<template>
	<view>
		<view class="page-foot">
			<view @tap="submit" class="btn-pri">确定提交</view>
		</view>
		<view class="container plr30">
			<view class="image_box">
				<image :src="avatar" mode="aspectFill"></image>
				<text @tap="upload" class="tips">更换\n头像</text>
			</view>
			<view class="flex-box item">
				<view class="fs30 col5">昵称</view>
				<input v-model="nickname" type="text" class="flex-grow-1 tr" placeholder="请输入"
					placeholder-class="cola" />
			</view>
			<view class="flex-box item">
				<view class="fs30 col5">手机号码</view>
				<input disabled :value="mobile" type="text" class="flex-grow-1 tr" placeholder="请输入"
					placeholder-class="cola" />
			</view>
		</view>
	</view>
</template>

<script>
	const app = getApp();

	const functions = require('../../../utils/functions.js');
	export default {
		data() {
			return {
				avatar: "",
				avatar_url: "",
				nickname: '',
				mobile: '',
			};
		},
		onLoad: function(options) {
			this.initData();
		},
		methods: {
			upload() {
				var that = this;
				functions.chooseImg(1, function(res) {
					that.avatar = res.fullurl;
					that.avatar_url = res.url;
				});
			},
			initData() {
				var that = this;
				functions.getAjaxData('/api/xiluhouse/User/index', {}, function(res) {
					app.globalData.userInfo = res.data;
					that.mobile = res.data.mobile;
					that.nickname = res.data.nickname;
					that.avatar = res.data.avatar;
				});
			},
			// 提交
			submit() {
				var that = this;
				if (!this.nickname) {
					functions.toast('请输入昵称');
					return false;
				}
				var json = {
					nickname: this.nickname,
					avatar: this.avatar_url,
				};
				functions.checkLogin(function(ret) {
					if (ret) {
						//继续提交
						functions.submitAjaxData(that, '/api/xiluhouse/user/profile', json, function(res) {
							functions.showSuccess('保存成功', function() {
								uni.navigateBack();
							});
						});
					} else {
						functions.toast('请先登录');
					}
				});
			}
		}
	}
</script>

<style lang="less" scoped>
	.btn-pri {
		margin: 30rpx auto;
		border-radius: 50rpx;
	}

	.container {
		min-height: auto;
	}

	.image_box {
		width: 150rpx;
		height: 150rpx;
		border-radius: 50%;
		overflow: hidden;
		position: relative;
		margin: 50rpx auto;

		image {
			width: 150rpx;
			height: 150rpx;
			border-radius: 50%;
			position: relative;
			z-index: 1;
		}

		.tips {
			font-size: 34rpx;
			color: #FFFFFF;
			line-height: 44rpx;
			background: rgba(0, 0, 0, 0.5);
			width: 150rpx;
			height: 150rpx;
			display: block;
			text-align: center;
			padding-top: 30rpx;
			position: absolute;
			top: 0;
			left: 0;
			z-index: 2;
		}
	}

	.item {
		height: 100rpx;
		line-height: 100rpx;
		border-bottom: 1rpx solid #F4F3F3;
	}

	.icon_check {
		width: 36rpx;
		height: 36rpx;
		border: 2rpx solid #aaa;
		border-radius: 50%;
		margin-right: 20rpx;

		&.active {
			border: 8rpx solid var(--normal);
		}
	}
</style>
